<!DOCTYPE html>
<!--suppress ALL -->
<html>

<head>
<title>信保通</title>
<!-- HTML5 Shim and Respond.js IE9 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Phoenixcoded">
<meta name="keywords"
	content=", Flat ui, Admin , Responsive, Landing, Bootstrap, App, Template, Mobile, iOS, Android, apple, creative app">
<meta name="author" content="Phoenixcoded">
<!-- Favicon icon -->
<link rel="icon" th:href="${urls.getForLookupPath('/assets/images/favicon.ico')}" type="image/x-icon">
<!-- Required Fremwork -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/bower_components/bootstrap/css/bootstrap.min.css')}">
<!-- themify icon -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/icon/themify-icons/themify-icons.css')}">
<!-- ico font -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/icon/icofont/css/icofont.css')}">
<!-- flag icon framework css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/flag-icon/flag-icon.min.css')}">
<!-- Menu-Search css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/menu-search/css/component.css')}">
<!-- Horizontal-Timeline css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/dashboard/horizontal-timeline/css/style.css')}">
<!-- amchart css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/dashboard/amchart/css/amchart.css')}">
<!-- flag icon framework css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/flag-icon/flag-icon.min.css')}">
<!-- Style.css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/css/style.css')}">
<!--color css-->
<!-- Date-time picker css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/advance-elements/css/bootstrap-datetimepicker.css')}">
<!-- Date-range picker css  -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/bower_components/bootstrap-daterangepicker/css/daterangepicker.css')}" />
<!-- Date-Dropper css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/bower_components/datedropper/css/datedropper.min.css')}" />
<!-- Data Table Css -->
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}">
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/pages/data-table/css/buttons.dataTables.min.css')}">
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/bower_components/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}">

<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/css/linearicons.css')}">
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/css/simple-line-icons.css')}">
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/css/ionicons.css')}">
<link rel="stylesheet" type="text/css" th:href="${urls.getForLookupPath('/assets/css/jquery.mCustomScrollbar.css')}">
<!-- pages -->
<link rel="stylesheet" th:href="${urls.getForLookupPath('/assets/css/common.css')}">
<link rel="stylesheet" th:href="${urls.getForLookupPath('/assets/css/element.css')}">
<style>
    .el-date-editor.el-input, .el-date-editor.el-input__inner { width:100%; }
    .el-tabs__item.is-active, .el-switch__label.is-active { color:#e6061f; font-weight:bold; }
    .el-tabs__active-bar { background-color:#e6061f; }
    .el-switch.is-checked .el-switch__core { border-color:#e6061f; background-color:#e6061f; }
    .el-switch__core:after { content:''; position:absolute; top:1px; left:1px; border-radius:100%; transition:transform .3s; width:16px; height:16px; background:#fff;}
    .is-checked .el-switch__core:after { transform:translate3d(20px, 0px, 0px);}
    .up { color:red; }
    .down { color:green; }
    .noData { position:absolute; top:25%; padding-top:65px; width:100%; background:url('/assets/images/noData.png') no-repeat center top; background-size:75px; text-align:center; font-size:18px; font-weight:bold;}
</style>
</head>

<body>
	<!-- Pre-loader start -->
	<div class="theme-loader">
		<div class="ball-scale">
			<div></div>
		</div>
	</div>
	<!-- Pre-loader end -->
	<!-- Menu header start -->
	<div id="pcoded" class="pcoded">
		<div class="pcoded-overlay-box"></div>
		<div class="pcoded-container navbar-wrapper">
            <div id="topBar"></div>
			<div class="pcoded-main-container">
				<div class="pcoded-wrapper">
				    <!-- nav -->
				    <div id="sidebarNavbar"></div>
					<div class="pcoded-content">
						<div class="pcoded-inner-content">
                            <!-- main -->
                            <div class="main-body" id="permissions">
                                    <div class="page-wrapper">
                                        <!-- Page-header start -->
                                        <div class="page-header">
                                            <div class="page-header-title">
                                                <h4>驱动指标</h4>
                                                <span>驱动指标......</span>
                                            </div>
                                            <div class="page-header-breadcrumb">
                                                <ul class="breadcrumb-title">
                                                    <li class="breadcrumb-item"><a href="demo_index.html"> <i class="icofont icofont-home"></i>
                                                    </a></li>
                                                    <li class="breadcrumb-item"><a href="#!">系统设置</a></li>
                                                    <li class="breadcrumb-item"><a href="#!">驱动指标</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- Page-header end -->
                                        <!-- Page-body start -->
                                        <div class="page-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="card table-1-card">
                                                        <div class="card-block">
                                                            <div class="card-body">
                                                                <div class="search-wrap">
                                                                    <el-form :model="searchForm" ref="searchForm" class="demo-form-inline" label-width="80px">
                                                                        <el-row>
                                                                            <el-col :span="6">
                                                                                <el-form-item label="查看日期">
                                                                                    <el-date-picker v-model="searchForm.searchDate" type="date" placeholder="选择日期" :clearable="false"></el-date-picker>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            <el-col :span="6">
                                                                                <el-form-item label="分公司" prop="branch">
                                                                                    <el-select v-model="searchForm.branch" placeholder="请选择分公司" filterable clearable @change="changeBranch(searchForm.branch)">
                                                                                   		<el-option v-for="branch in branchs" :label="branch" :value="branch"></el-option>
                                                                                    </el-select>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            
                                                                            <el-col :span="6">
                                                                                <el-form-item label="CSO" prop="cso">
                                                                                    <el-select v-model="searchForm.cso" placeholder="请选择机构" filterable clearable >
                                                                                    	<el-option v-for="cso in CSOs" :label="cso" :value="cso"></el-option>
                                                                                    </el-select>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            
                                                                            <el-col :span="6" style="text-align:right">
                                                                                <button type="button" class="btn btn-round btn-success"  @click="query">
                                                                                    <i class="icofont icofont-ui-search"></i>查询
                                                                                </button>
                                                                                <button type="button" class="btn btn-round btn-warning" @click="resetSearchForm('searchForm')">
                                                                                    <i class="icofont icofont icofont-ui-delete"></i>清空
                                                                                </button>
                                                                            </el-col>
                                                                        </el-row>
                                                                    </el-form>
                                                                </div>
                                                                <div style="position:relative; margin-top:20px;">
                                                                
                                                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                                                        <el-tab-pane label="驱动指标" name="drivingIndex">
                                                                            <el-table :data="drivingIndexTable" border style="width:100%">
                                                                                <el-table-column prop="name"></el-table-column>
                                                                                <el-table-column prop="average_curr" :label="curr_name"></el-table-column>
                                                                                <el-table-column prop="average_last" :label="last_name"></el-table-column>
                                                                                <el-table-column prop="growthRate" label="增长率" > </el-table-column>
                                                                            </el-table>
                                                                        </el-tab-pane>
                                                                        
                                                                        <el-tab-pane label="趋势分析" name="trendAlalysis"></el-tab-pane>
                                                                        
                                                                        <el-tab-pane label="网点经营" name="networkManage">
                                                                            <el-table :data="networkManageTable" border style="width:100%">
                                                                                <el-table-column prop="bank" label="银行渠道"></el-table-column>
                                                                                <el-table-column prop="networkCount" label="签约物理网点"></el-table-column>
                                                                                <el-table-column prop="networkActivity" label="网点活动率"></el-table-column>
                                                                                <el-table-column prop="activityNumber" label="活动网均件数"></el-table-column>
                                                                                <el-table-column prop="ape" label="件均APE(元)"></el-table-column>
                                                                                <el-table-column prop="activityAPE" label="活动网均APE(元)"></el-table-column>
                                                                            </el-table>
                                                                        </el-tab-pane>
                                                                        
                                                                        <el-tab-pane label="人力队伍" name="staffTeam">
                                                                            <el-table :data="staffTeamTable" border style="width:100%">
                                                                                <el-table-column prop="province" label="分公司"></el-table-column>
                                                                                <el-table-column prop="city" label="cso"></el-table-column>
                                                                                <el-table-column prop="totalStaff" label="总人力"></el-table-column>
                                                                                <el-table-column prop="activityRate" label="人员活动率"></el-table-column>
                                                                                <el-table-column prop="activityNumber" label="活动人均件数"></el-table-column>
                                                                                <el-table-column prop="ape" label="件均APE(元)"></el-table-column>
                                                                                <el-table-column prop="activityAPE" label="活动人均APE(元)"></el-table-column>
                                                                                <el-table-column prop="increaseStaff" label="当月新增人力"></el-table-column>
                                                                                <el-table-column prop="reduceStaff" label="当月离职人力"></el-table-column>
                                                                            </el-table>
                                                                            <div>
		                                                                    	<el-pagination background layout="prev, pager, next,total" :page-size="pageBean.pageSize" :current-page="currentpage" @current-change="handleCurrentChange" :total="pageBean.totalNumber"></el-pagination>
		                                                                    </div>
                                                                        </el-tab-pane>
                                                                    </el-tabs>
                                                                    <div class="noData" v-show="noData">暂无数据</div>
                                                                    <div id="myChart" ref="myChart" v-show="showChart"></div>
                                                                    
                                                                    <el-switch style="position:absolute; right:10px; top:10px" v-model="yearMonth" active-text="年度" inactive-text="月度"  @change="switchYEARorMONTH"></el-switch>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>


						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Older IE warning message -->
	<!-- Warning Section Ends -->
	<!-- Required Jqurey -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/jquery/js/jquery.min.js')}"></script>
	<script th:src="${urls.getForLookupPath('/bower_components/jquery-ui/js/jquery-ui.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/popper.js/js/popper.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/bootstrap/js/bootstrap.min.js')}"></script>
	<!-- jquery slimscroll js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/jquery-slimscroll/js/jquery.slimscroll.js')}"></script>
	<!-- modernizr js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/modernizr/js/modernizr.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/modernizr/js/css-scrollbars.js')}"></script>
	<!-- classie js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/classie/js/classie.js')}"></script>

	<!-- i18next.min.js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/i18next/js/i18next.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/i18next-xhr-backend/js/i18nextXHRBackend.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/i18next-browser-languagedetector/js/i18nextBrowserLanguageDetector.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/jquery-i18next/js/jquery-i18next.min.js')}"></script>



	<!-- Bootstrap date-time-picker js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/assets/pages/advance-elements/moment-with-locales.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}"></script>
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/assets/pages/advance-elements/bootstrap-datetimepicker.min.js')}"></script>
	<!-- Date-range picker js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/bootstrap-daterangepicker/js/daterangepicker.js')}"></script>
	<!-- Date-dropper js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/bower_components/datedropper/js/datedropper.min.js')}"></script>
	<!-- Custom js -->
	<script type="text/javascript"
		th:src="${urls.getForLookupPath('/assets/pages/advance-elements/custom-picker.js')}"></script>
	<script type="text/javascript" th:src="${urls.getForLookupPath('/assets/js/script.js')}"></script>
	<script th:src="${urls.getForLookupPath('/assets/js/pcoded.min.js')}"></script>
	<!-- pcmenu js -->
	<script th:src="${urls.getForLookupPath('/assets/js/pcoded.min.js')}"></script>
	<script th:src="${urls.getForLookupPath('/assets/js/demo-12.js')}"></script>
	<script th:src="${urls.getForLookupPath('/assets/js/jquery.mCustomScrollbar.concat.min.js')}"></script>
	<script th:src="${urls.getForLookupPath('/assets/js/jquery.mousewheel.min.js')}"></script>
    <!-- vue js -->
	<script th:src="${urls.getForLookupPath('/assets/js/vue/vue.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/assets/js/vue/element.js')}"></script>
    <!-- datatables -->
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/jquery.dataTables.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/dataTables.buttons.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/jszip.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/pdfmake.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/vfs_fonts.js')}"></script>
    <script th:src="${urls.getForLookupPath('/bower_components/datatable/buttons.html5.min.js')}"></script>
    <!-- pages -->
    <script th:src="${urls.getForLookupPath('/assets/js/echarts.min.js')}"></script>
    <script th:src="${urls.getForLookupPath('/assets/js/pages/common.js')}"></script>
    <script th:src="${urls.getForLookupPath('/assets/js/pages/statistical/drivingIndex.js')}"></script>
</body>
</html>
